/*
 * @Author: Wilbur
 * @Date: 2019-07-04 17:38:05
 * @Last Modified by: Wilbur
 * @Last Modified time: 2019-07-04 18:40:42
 */

<template>
    <div class="container invoice-list-container">
        <!-- <div class="operation-wrapper">
            <el-button
                type="primary"
                @click="handleRoute('materialAdd')"
                size="small">上传资料</el-button>
        </div> -->
        <div class="content-wrapper">
            <div class="table-wrapper">
                <el-table
                    :data="tableData"
                    height="100%"
                    style="width: 100%;">
                    <el-table-column
                        fixed="left"
                        header-align="left"
                        align="center"
                        :width="50"
                        label="序号">
                        <template slot-scope="scope">
                            <div class="table-index">
                                {{ scope.$index + 1 }}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column
                        fixed="left"
                        prop="company_name"
                        show-overflow-tooltip
                        label="公司名称"/>

                    <el-table-column
                        fixed="left"
                        prop="true_name"
                        :formatter="emptyFormatter"
                        show-overflow-tooltip
                        label="姓名 "/>

                    <el-table-column
                        prop="material_tag_list"
                        show-overflow-tooltip
                        label="发票类型">
                        <template slot-scope="scope">
                            {{ scope.row.type | filterInvoiceType }}
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="material_tag_list"
                        :min-width="90"
                        label="收件人信息">
                        <template slot-scope="scope">
                            <el-popover
                                placement="right"
                                width="400"
                                trigger="click">
                                <div
                                    class="address-info"
                                    v-if="scope.row.address_info">
                                    <p>收件人：{{ scope.row.address_info.recipient }}</p>
                                    <p>手机号：{{ scope.row.address_info.phone }}</p>
                                    <p>收件地址：{{ scope.row.address_info.address }}</p>
                                </div>
                                <div v-else>
                                    用户未填写
                                </div>
                                <el-button
                                    slot="reference"
                                    type="text">查看</el-button>
                            </el-popover>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="material_tag_list"
                        label="发票信息">
                        <template slot-scope="scope">
                            <el-popover
                                placement="right"
                                width="400"
                                trigger="click">
                                <div class="address-info">
                                    <p>发票抬头：{{ scope.row.title }}</p>
                                    <p>发票类型：{{ scope.row.type | filterInvoiceType }}</p>
                                    <p>税务登记证号：{{ scope.row.tax_reg_cert_number }}</p>
                                    <p>基本开户银行名称：{{ scope.row.bank_name }}</p>
                                    <p>基本开户账号：{{ scope.row.bank_account }}</p>
                                    <p>注册场所地址：{{ scope.row.company_address }}</p>
                                    <p>注册固定电话：{{ scope.row.company_tel }}</p>
                                </div>
                                <el-button
                                    slot="reference"
                                    :disabled="scope.row.type != 1 ? false : true"
                                    type="text">发票信息</el-button>
                            </el-popover>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="title"
                        show-overflow-tooltip
                        label="发票抬头">
                        <template slot-scope="scope">
                            <span v-if="scope.row.type ==1">{{ scope.row.true_name }}</span>
                            <span v-if="scope.row.type != 1">{{ scope.row.title }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="track_no"
                        :formatter="emptyFormatter"
                        label="物流编号"/>
                    <el-table-column
                        prop="create_time"
                        label="申请时间">
                        <template slot-scope="scope">
                            {{ scope.row.create_time*1000 | dateFormatter('yyyy/MM/dd HH:mm') }}
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="status"
                        label="状态">
                        <template slot-scope="scope">
                            <span v-if="scope.row.status == 1">未开票</span>
                            <span v-if="scope.row.status == 2">已开票</span>
                        </template>
                    </el-table-column>

                    <el-table-column
                        prop="date"
                        label="操作"
                        :width="150"
                        fixed="right">
                        <template slot-scope="scope">
                            <div>
                                <el-button
                                    type="text"
                                    :disabled="scope.row.status == 2 ? true : false"
                                    @click="fnSuccessAdd(scope.row.id, 2)">开票</el-button>

                                <el-button
                                    type="text"
                                    style="margin-left:10px;"
                                    :disabled="scope.row.status == 1 ? true : false"
                                    title="开票之后才可以填写物流单号"
                                    @click="fnAddRemark(scope.row.id)">
                                    填写物流编号
                                </el-button>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="pagination-wrapper clearfix">
                <el-pagination
                    background
                    layout="total, prev, pager, next"
                    :total="page.total_count"
                    :page-size="page.page_size"
                    @current-change="getTableData" />
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            authResult: {},
            tableData: [],
            filterData: {
                id: ''
            },
            page: {
                now_page: 1,
                total_count: 0,
                page_size: 0
            },
            baseUrl: '',
            mobileUrl: '',
            escape: escape,
            sessionTicket: localStorage.getItem('sessionTicket')
        };
    },
    created() {
        this.authResult = this.$route.meta.authResult;
        this.baseUrl = this.$baseUrl;
        this.mobileUrl = location.host == 'phaadmin.wxhand.com' ? 'http://class.zsdx.cn' : 'http://task.wxhand.com';
        this.$store.commit('SET_HEADER', [
            {
                title: "广告系统",
            },
            {
                title: "发票管理"
            }
        ]);
        if(this.$route.query.id) {
            this.filterData.id = this.$route.query.id;
        }
        this.getTableData();
    },
    mounted() {
    },
    methods: {
        fnAddRemark(id) {
            this.$prompt('请填写物流单号', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                inputPattern: /\S/,
                inputPlaceholder: '请填写物流单号',
                inputErrorMessage: '请填写物流单号'
            }).then(({ value }) => {
                this.$post('/wei4/hire_invoice%5Cset_track_no', {
                    id: id,
                    track_no: value
                }, resp => {
                    if (resp.code == 1) {
                        this.getTableData();
                        this.$message({
                            type: 'success',
                            message: '操作成功',
                            center: true
                        });
                    }
                });
            }).catch(() => {
            });
        },
        fnSuccessAdd(no, status) {
            this.$confirm('请检查是否已经为企业开具发票？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$post('/wei4/hire_invoice%5Cset_status', {
                    id: no,
                    status: status
                }, resp => {
                    if (resp.code == 1) {
                        this.getTableData();
                        this.$message({
                            type: 'success',
                            message: '操作成功',
                            center: true
                        });
                    }
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        fnComputedTags(array) {
            let temp = '';

            for(let i = 0; i < array.length; i++) {
                if(temp) {
                    temp += ',';
                }
                temp += array[i].tag_name;
            }
            return temp;
        },
        /**
         * 获取表格数据
         */
        getTableData(page) {
            this.$post('/wei4/hire_invoice%5Cget_list', {
                page: page || this.page.now_page,
                id: this.filterData.id
            }, resp => {
                if (resp.code == 1) {
                    this.tableData = resp.data.list;
                    this.page.now_page = resp.data.page.now_page;
                    this.page.total_count = resp.data.page.total_count;
                    this.page.page_size = resp.data.page.page_size;
                }
            });
        },

        /**
         * 跳转页面
         */
        handleRoute(name, query) {
            let obj = {
                name
            };

            if (query) {
                obj.query = query;
            }

            this.$router.push(obj);
        },

        /**
         * 列表渲染辅助函数：列表项为空处理
         */
        emptyFormatter(row, column, val) {
            if (!val) {
                return '--';
            }
            return val;
        }
    },
    filters: {
        filterInvoiceType(val) {
            if(val == 1) {
                return '个人发票';
            }else if(val == 2) {
                return '增值税发票';
            }else if(val == 3) {
                return '增值税专用发票';
            }else{
                return '未知';
            }
        }
    }
};
</script>

<style lang="less" scoped>
.container {
    display: flex;
    flex-direction: column;
    width: 100%;
}
.operation-wrapper {
    display: flex;
    flex-direction: row-reverse;
    padding: 12px 23px;
    background-color: #fff;

    .el-button {
        margin-left: 10px;
    }
}
.content-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin: 15px;
    overflow: hidden;
}
.search-wrapper {
    padding: 15px;
    background-color: #fff;
}
.filter-item {
    .el-form-item {
        margin-bottom: 0;
        white-space: nowrap;
    }
    .el-input {
        width: auto;
        vertical-align: middle;
    }
    .el-button {
        margin-left: 15px;
        vertical-align: middle;
    }
}
.table-wrapper {
    flex: 1;
    background-color: #fff;
}
.pagination-wrapper {
    padding-top: 10px;
    .el-pagination {
        float: right;
        padding: 0;
        background-color: transparent;
    }
}
</style>
<style lang="less">
.invoice-list-container {
    tbody {
        .cell {
            display: flex;
            align-items: center;
            height: 48px;
        }
    }

}
.address-info{
    p{
        padding: 10px;
    }
}
</style>
